<template>
  <div>
    <div>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-search"></i> 筛选查询
            </div>
            <div>
              <el-button @click="selectResults">查询结果</el-button>
              <el-button @click="onSubmit">高级检索</el-button>
            </div>
          </el-header>
          <el-main class="info-main">
            <el-form ref="form" :model="formInline" label-width="100px">
              <el-form-item class="select-div" label="输入搜索：">
                <el-input placeholder="商品名称/商品货号" class="input-width" v-model="formInline.name"></el-input>
              </el-form-item>
              <el-form-item class="select-div" label="操作类型">
                <el-select v-model="formInline.operationType" class="input-width" placeholder="全部">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="编辑货品" value="0"></el-option>
                  <el-option label="编辑商品" value="2"></el-option>
                  <el-option label="订单提交时" value="7"></el-option>
                  <el-option label="订单发货时" value="8"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="select-div" label="操作时间">
                <el-date-picker
                  v-model="formInline.creationTime"
                  type="date"
                  style="width: 197px"
                  placeholder="选择时间"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-main>
      <el-footer>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-s-fold"></i> 数据列表
            </div>
            <div>
              <el-select v-model="accordingPageSize" class="input-width2" placeholder="显示条数"></el-select>
              <el-select v-model="sort" class="input-width2" placeholder="排列方式">
                <el-option label="库存数量排序" value="0"></el-option>
                <el-option label="剩余库存排序" value="1"></el-option>
                <el-option label="入库时间排序" value="2"></el-option>
              </el-select>
            </div>
          </el-header>
        </el-container>
      </el-footer>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="encode" label="编号" width="100px">
          <template slot-scope="scope">{{scope.row.encode}}</template>
        </el-table-column>
        <el-table-column prop="image" label="商品图片" width="100">
          <!-- solt-scope=”scope” -->
          <template scope="scope">
            <img :src="scope.row.image" width="40" height="40" class="head_pic" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="200px">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column prop="spuNum,spec" label="货号/属性" width="220px">
          <template slot-scope="scope">
            货号:{{scope.row.spuNum}}
            <div>属性:{{scope.row.spec}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="100px">
          <template slot-scope="scope">{{scope.row.orderId}}</template>
        </el-table-column>
        <el-table-column prop="stockNum,residueStock" label="库存" width="100px">
          <template slot-scope="scope">
            库存-{{scope.row.stockNum}}
            <div>剩余:{{scope.row.residueStock}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stockType" label="库存类型" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.stockType == 0">商品库存</span>
            <span v-if="scope.row.stockType == 1">货品库存</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作类型" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.operationType == 0">编辑货品</span>
            <span v-if="scope.row.operationType == 2">编辑商品</span>
            <span v-if="scope.row.operationType == 7">订单提交时</span>
            <span v-if="scope.row.operationType == 8">订单发货时</span>
          </template>
        </el-table-column>
        <el-table-column prop="adminId,creationTime" fixed="right" label="操作信息" width="200px">
          <template slot-scope="scope">
            <span v-if="scope.row.adminId == 0">管理员:美女</span>
            <span v-if="scope.row.adminId == 1">管理员:帅哥</span>
            <div>{{scope.row.creationTime}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div class="block-1">
        <el-checkbox @change="toggleSelectionCheckbox" size="small">全选</el-checkbox>
        <el-select v-model="formInline.region" placeholder="批量操作">
          <el-option label="删除" value="beijing"></el-option>
        </el-select>
        <el-button @click="ScreenButton">确定</el-button>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="高级检索" :visible.sync="dialogVisible" width="30%">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="top">
          <el-form-item label="输入搜索">
            <el-input v-model="formInline.name" placeholder="商品名称/商品货号"></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="formInline.orderId" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="库存类型">
            <el-select v-model="formInline.stockType" placeholder="全部">
              <el-option label="商品库存" value="0"></el-option>
              <el-option label="货品库存" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作类型">
            <el-select v-model="formInline.operationType" placeholder="全部">
              <el-option label="编辑货品" value="0"></el-option>
              <el-option label="编辑商品" value="2"></el-option>
              <el-option label="订单提交时" value="7"></el-option>
              <el-option label="订单发货时" value="8"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作人员">
            <el-select v-model="formInline.adminId" placeholder="全部">
              <el-option label="美女" value="0"></el-option>
              <el-option label="帅哥" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="formInline.creationTime"
              type="date"
              style="width: 197px"
              placeholder="选择时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm()">重置</el-button>
            <el-button type="primary" @click="ScreenTwo">开始检索</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import stockApi from "@/api/goods/stocklist";
export default {
  data() {
    return {
      //分页
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage4: 1,
      sort: 0,

      value: "",
      form: {
        name: "",
        type: "",
        brand: ""
      },
      formInline: {
        name: null,
        orderId: null,
        stockType: null,
        operationType: null,
        adminId: null,
        creationTime: null
      },
      dialogVisible: false,

      //开起筛选
      selectrue: true,

      accordingPageSize: "",
      tableData: [],
      value1: true,
      goodsAudit: {
        name: "",
        audit: "",
        content: ""
      }
    };
  },
  watch: {
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      if (this.selectrue == true) {
        this.inDatasTwo(
          this.currentPage4,
          this.pageSize,
          val,
          this.formInline.name,
          this.formInline.spuNum,
          this.formInline.orderId,
          this.formInline.stockType,
          this.formInline.operationType,
          this.formInline.adminId,
          this.formInline.creationTime
        );
      } else {
        this.inDatas(this.currentPage4, this.pageSize, val);
      }
    }
  },
  methods: {
    // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }
      let d = new Date(str);
      let newDateYear = d.getFullYear();
      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";
      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    },

    onSubmit() {
      console.log("submit!");
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    selectResults() {
      console.log(this.formInline);
      this.inDatasTwo(
        this.currentPage4,
        this.pageSize,
        this.sort,
        this.formInline.name,
        this.formInline.spuNum,
        this.formInline.orderId,
        this.formInline.stockType,
        this.formInline.operationType,
        this.formInline.adminId,
        this.formInline.creationTime
      );
    },
    toggleSelectionCheckbox() {
      if (this.tableData) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      if (this.selectrue == true) {
        this.inDatasTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.name,
          this.formInline.spuNum,
          this.formInline.orderId,
          this.formInline.stockType,
          this.formInline.operationType,
          this.formInline.adminId,
          this.formInline.creationTime
        );
      } else {
        this.inDatas(this.currentPage4, this.pageSize, this.sort);
      }
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${val}`);
      if (this.selectrue == true) {
        this.inDatasTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.name,
          this.formInline.spuNum,
          this.formInline.orderId,
          this.formInline.stockType,
          this.formInline.operationType,
          this.formInline.adminId,
          this.formInline.creationTime
        );
      } else {
        this.inDatas(this.currentPage4, this.pageSize, this.sort);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },

    //分页查询
    inDatas(pageNum, pageSize, sort) {
      stockApi.getStockPagesTwoList(pageNum, pageSize, sort).then(Response => {
        console.log(Response);
        this.tableData = Response.data.data.list;
        this.total = Response.data.data.total;
      });
    },

    //批量删除
    ScreenButton() {
      this.$confirm("是否删除" + "提示", {
        type: "warning"
      }).then(() => {
        stockApi.getDeleteList(this.multipleSelection).then(Response => {
          const pss = Response.data;
          console.log(Response);
          if (pss.code == 200) {
            this.inDatas(this.currentPage4, this.pageSize, this.sort);
          } else {
            this.$message({
              message: pss.message,
              type: "warning"
            });
          }
        });
      });
    },

    //筛选条件
    inDatasTwo(
      pageNum,
      pageSize,
      sort,
      name,
      spuNum,
      orderId,
      stockType,
      operationType,
      adminId,
      creationTime
    ) {
      if (
        name != null ||
        spuNum != null ||
        orderId != null ||
        stockType != null ||
        operationType != null ||
        adminId != null ||
        creationTime != null
      ) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选为" + this.selectrue);
      if (creationTime != null) {
        var time = this.parseTime(creationTime);
      } else {
        var time = creationTime;
      }
      stockApi
        .getStockScreenTwoList(
          pageNum,
          pageSize,
          sort,
          name,
          spuNum,
          orderId,
          stockType,
          operationType,
          adminId,
          time
        )
        .then(Response => {
          console.log(Response);
          this.tableData = Response.data.data.list;
          this.total = Response.data.data.total;
        });
    },

    handleClick() {},
    resetForm(formName) {
      (this.formInline.name = null),
        (this.formInline.spuNum = null),
        (this.formInline.orderId = null),
        (this.formInline.stockType = null),
        (this.formInline.operationType = null),
        (this.formInline.adminId = null),
        (this.formInline.creationTime = null);
    },

    //筛选检索
    ScreenTwo() {
      (this.currentPage4 = 1),
        (this.pageSize = 2),
        this.inDatasTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.name,
          this.formInline.spuNum,
          this.formInline.orderId,
          this.formInline.stockType,
          this.formInline.operationType,
          this.formInline.adminId,
          this.formInline.creationTime
        );
      this.dialogVisible = false;
    }
  },
  mounted() {
    this.inDatas(this.currentPage4, this.pageSize, this.sort);
  }
};
</script>
<style scoped>
.block-1 {
  float: left;
}
.block {
  float: right;
}
</style>
